<template>
	<div>
		<c_header :title="name || '加载中...'" :leftOptions="{backText: ''}" :rightOptions="{showMore: true}"></c_header>
		<div v-if="detail">
				<div class="spots-detail-section">
					<h2 class="fs-bigger">{{name}}</h2>
					<div class="spots-detail-image" @click="viewImage()">
						<img :src="detail.picList[0].picUrl" :alt="detail.name" />
						<span>+{{detail.picList.length}}张</span>
					</div>
				</div>
				<div class="spots-detail-section">
					<h2 class="fs-big">景点攻略</h2>
					<p v-if="detail.opentime">
						<strong>开放时间 </strong><span v-html="detail.opentime"></span></p>
					<p v-if="detail.price">
						<strong>价格 </strong>￥<span v-html="detail.price"></span></p>
					<p v-if="detail.coupon">
						<strong>优惠信息 </strong><span v-html="detail.coupon"></span></p>
					<p v-if="detail.address">
						<strong>联系方式 </strong><span v-html="detail.address"></span></p>
				</div>
				<div class="spots-detail-section">
					<h2 class="fs-big">简介</h2>
					<p v-html="detail.content||detail.summary"></p>
				</div>
		</div>
		<c_sidemenu></c_sidemenu>
	</div>
</template>

<script>
import c_header from '@/components/c_header'
import c_sidemenu from '@/components/c_sidemenu'
import { XImg } from 'vux'

export default {
	props: ['detailData'],
	data () {
		return {
			detail: '',
			imageShow: false
		}
	},
	components: {
		c_header, c_sidemenu, XImg
	},
	computed: {
		name () {
			return this.$route.query.name
		}
	},
	methods: {
		spots (name) {
			this.$vux.loading.show('数据加载中...')
			this.$getData.spots({keyword: name}, (response) => {
				this.detail = response.data.showapi_res_body.pagebean.contentlist[0]
				this.$vux.loading.hide()
			}, () => {
				this.$vux.loading.hide()
			})
		},
		viewImage () {
			this.$router.push({name: 'spots-image', query: {name: this.detail.name}, params: {images: this.detail.picList}})
		}
	},
	filters: {
		trimlr (value) {
			return value.replace(/^\s*(.*)\s$/, '$1')
		}
	},
	activated () {
		this.detail = this.detailData
		//不能判断detail，detail不管能否获取到值，都不为空
		let name = this.$route.query.name
		if(name){
			document.title = name
		}else{
			this.$vux.alert('网址错误')
			return false
		}
		//如果没有list页面传值，则ajax获取
		this.detail || this.spots(name)
	}
}
</script>

<style>
.spots-detail-section{padding: .8rem;background: #fff;border-top: 1px solid #f3f2f5;border-bottom: 1px solid #f3f2f5;margin-bottom: .4rem;}
.spots-detail-section:first-child{border-top: none;}
.spots-detail-section:last-child{margin-bottom: 0;border-bottom: none;}

.spots-detail-section h2{line-height: 30px;padding: 0 0 .4rem;}
.spots-detail-image{position: relative;text-align: center;border-radius: 5px;overflow: hidden;}
.spots-detail-image img{position: relative;z-index: 0;}
.spots-detail-image span{position: absolute;right: 0;bottom: 0;z-index: 1;color: #fff;padding: .25rem;background: rgba(0,0,0,.4);border-top-left-radius: 5px;}

.spots-detail-section p{line-height: 22px;padding: 5px 0;}

</style>